<template>
  <div class="word-cloud">
    <article class="row" style="min-height: 480px">
      <textarea
        type="textarea"
        name="text"
        placeholder="输入文章"
        v-model="textRaw"
      />
      <div class="btn btn-split">
        <button @click="onWordCut" :disabled="!textRaw">分词</button>
        <!-- <button @click="onWordCut">分词</button> -->
      </div>
      <textarea
        type="textarea"
        name="text"
        placeholder="数量 词语"
        v-model="text"
      />
    </article>

    <div class="center">
      <div style="width: 320px">
        <span>调节字体大小</span>
        <input type="number" v-model="weightFactor" @change="onGen" />
      </div>
    </div>

    <div class="center">
      <div style="width: 320px">
        <button @click="onGen" :disabled="!text">生成</button>
      </div>
    </div>

    <div class="row center">
      <article>
        <canvas id="canvas" ref="canvas" width="640" height="480"></canvas>
      </article>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import WordCloud from 'wordcloud';
import { getWordsSplit, arrayCount } from '../utils/index';
import { Segment, useDefault } from 'segmentit';

const canvas = ref<HTMLElement>();
const textRaw =
  ref<string>(`中文分词指的是中文在基本文法上有其特殊性而存在的分词。
分词就是将连续的字序列按照一定的规范重新组合成词序列的过程。我们知道，在英文的行文中，单词之间是以空格作为自然分界符的，而中文只是字、句和段能通过明显的分界符来简单划界，唯独词没有一个形式上的分界符，虽然英文也同样存在短语的划分问题，不过在词这一层上，中文比之英文要复杂得多、困难得多。`);
const text = ref<string>(``);

onMounted(() => {
  onGen();
  // onWordCut()
});

const weightFactor = ref(10.0);

/**
 * 对文本进行分词处理
 *
 * @returns 无返回值
 */
const onWordCut = () => {
  // 使用默认的分词器
  const segmentit = useDefault(new Segment());

  // 对原始文本进行分词
  const result = segmentit.doSegment(textRaw.value, {
    simple: true,    // 使用简单模式
    stripPunctuation: true // 去除标点符号
  });

  // 打印分词结果
  console.log(result);

  // 统计每个词的出现次数，并将结果格式化为“次数 词”的形式
  const r = arrayCount(result).map((v) => `${v[1]} ${v[0]}`);

  // 打印格式化后的结果
  console.log(r);

  // 将格式化后的结果赋值给 text 变量，并用换行符连接
  text.value = r.join('\n');
};
/**
 * 生成词云图
 *
 * @returns 无返回值
 */
const onGen = () => {
  // 如果 canvas 和 text 都有值
  if (canvas.value && text.value) {
    // 调用 WordCloud 函数生成词云
    WordCloud(canvas.value, {
      // 传入从 text 中解析出的词列表
      list: getWordsSplit(text.value),
      // 传入权重因子
      weightFactor: weightFactor.value
    });
  }
};
</script>

<style>
.word-cloud {
  padding: 1rem;
}
.row {
  display: flex;
  flex-direction: row;
}
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.btn-split {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  width: 220px;
}

.btn button {
  width: 120px;
}
</style>
